<template>
<div class="tool">
  <a-popover placement="leftTop">
    <template #content>
      <a-switch v-model:checked="checkedType" checked-children="line" un-checked-children="polygon" />
      <a-form
          :model="formState"
          name="basic"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          autocomplete="off"
        >
          <a-form-item
            label="线条颜色"
            name="username"
          >
            <a-input type="color" v-model:value="formState.color" />
          </a-form-item>

          <a-form-item
            label="线条宽度"
            name="password"
          >
            <a-input type="number" v-model:value="formState.width" />
          </a-form-item>

          <a-form-item
            v-if="!checkedType"
            label="填充颜色"
            name="password"
          >
            <a-input type="color" v-model:value="formState.fillcolor" />
          </a-form-item>

          <a-form-item
            v-if="!checkedType"
            label="透明度"
            name="password"
          >
            <a-input type="number" :min="0" :max="1"  v-model:value="formState.opacity" />
          </a-form-item>
        </a-form>


    </template>
    <template #title>
      <span>属性编辑</span>
    </template>
    <div>
      
    </div>
    <div class="tool-btn">
      <ToolOutlined />
    </div>
  </a-popover>

  <CloseCircleOutlined v-if="drawIng" class="flex-center icon-btn" @click="stopDraw"  />
</div>
</template>

<script lang="ts" setup>
import { ref,reactive, computed,watch ,onMounted } from 'vue'
import { ToolOutlined,CloseCircleOutlined } from '@ant-design/icons-vue';
import { useStore } from 'vuex';

 const store = useStore(); // 获取 store
 const map = computed(() => store.state.map);
  const checkedType = ref(true)
const formState = reactive({
  color: 'red',
  width: 4
})
onMounted(()=>{
  let map = store.state.map
  if(map && map.getPaintProperty){
    if(checkedType.value){
      formState.color = map.getPaintProperty('gl-draw-line-inactive.cold','line-color')
      formState.width = Number(map.getPaintProperty('gl-draw-line-inactive.cold','line-width'))
    }else{
      formState.fillcolor = map.getPaintProperty('gl-draw-polygon-fill-inactive.cold','fill-color')
      formState.fillopacity = Number(map.getPaintProperty('gl-draw-polygon-fill-inactive.cold','fill-opacity'))
      formState.color = map.getPaintProperty('gl-draw-polygon-stroke-inactive.cold','line-color')
      formState.width = Number(map.getPaintProperty('gl-draw-polygon-stroke-inactive.cold','line-width'))
    }
  }
})
    watch(formState, (newValue, oldValue) => {
      let map = store.state.map
      if(map && map.setPaintProperty){
        if(checkedType.value){
          map.setPaintProperty('gl-draw-line-inactive.cold','line-color',formState.color)
          map.setPaintProperty('gl-draw-line-inactive.cold','line-width', Number(formState.width))
        }else{
          map.setPaintProperty('gl-draw-polygon-fill-inactive.cold','fill-outline-color', formState.color)
          map.setPaintProperty('gl-draw-polygon-fill-inactive.cold','fill-color', formState.fillcolor)
          map.getPaintProperty('gl-draw-polygon-fill-inactive.cold','fill-opacity', formState.fillopacity)

          map.setPaintProperty('gl-draw-polygon-stroke-inactive.cold','line-color',formState.color)
          map.setPaintProperty('gl-draw-polygon-stroke-inactive.cold','line-width', Number(formState.width))
        }
      }
    });

    watch(checkedType, (newValue, oldValue) => {
      let map = store.state.map
      if(map && map.setPaintProperty){
        if(checkedType.value){
          formState.color = map.getPaintProperty('gl-draw-line-inactive.cold','line-color')
          formState.width = Number(map.getPaintProperty('gl-draw-line-inactive.cold','line-width'))
        }else{
          formState.fillcolor = map.getPaintProperty('gl-draw-polygon-fill-inactive.cold','fill-color')
          formState.fillopacity = Number(map.getPaintProperty('gl-draw-polygon-fill-inactive.cold','fill-opacity'))
          formState.color = map.getPaintProperty('gl-draw-polygon-stroke-inactive.cold','line-color')
          formState.width = Number(map.getPaintProperty('gl-draw-polygon-stroke-inactive.cold','line-width'))
        }
      }
    });
</script>

<style lang="scss" scope>
  .tool{
    position: fixed;
    z-index: 10;
    width: 30PX;
    height: 30PX;
    border-radius: 3PX;
      top: 128PX;
    right: 10PX;
  }
  .tool-btn{
    width: 30PX;
    height: 30PX;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 4PX;
  }
  .icon-btn{
    width: 30PX;
    height: 30PX;
    right: 10PX;
    background: #fff;
    border-radius: 4PX;
  }
  .flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
  }

</style>